<template>
	<view class="address text-primary" :class="{ is_default }">
		<Card>
			<view class="flex items-center">
				<text class="name">{{ consignee }}</text>
				<text class="phone">{{ mobile }}</text>
				<view v-if="is_default" class="tag">默认</view>
			</view>
			<view class="detail flex justify-between">
				<text>{{ address }}</text>
				<image src="@/static/icon_edit.png" @click="editAddr(id)"/>
			</view>
			<view class="divider" />
			<view class="footer flex items-center justify-between">
				<view class="flex items-center" @click="changeactive(id)">
					<image v-if="is_default" src="@/static/icon_checked_primary.png" />
					<view v-else class="placeholder"></view>
					<text class="label-set">设置默认地址</text>
				</view>
				<text style="align-self: flex-end;" @click="delAddr(id)">删除</text>
			</view>
		</Card>
	</view>
</template>

<script setup>
	import {
		defineProps,defineEmits
	} from 'vue'
	import Card from '@/components/Card/index.vue'

	defineProps(['id','consignee', 'address', 'mobile', 'is_default', 'detail'])
	const emits = defineEmits(['changeactive', 'delAddr','editAddr'])

	// 改变默认地址
	const changeactive = (id) => {
		console.log(id);
		// 是否确认设为默认地址
		uni.showModal({
			title: '提示',
			content: '是否确认设为默认地址',
			success: function(res) {
				if (res.confirm) {
					emits('changeactive', id)
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	// 删除地址
	const delAddr = (id) => {
		console.log(id);
		// 是否确认删除地址
		uni.showModal({
			title: '提示',
			content: '是否确认删除地址',
			success: function(res) {
				if (res.confirm) {
					emits('delAddr', id)
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	// 修改地址
	const editAddr = (id) => {
		emits('editAddr', id)
	}
</script>

<style lang="scss">
	.address {
		font-size: 24rpx;

		.name {
			margin-right: 66rpx;
			font-size: 30rpx;
		}

		.phone {
			font-size: 26rpx;
		}

		.tag {
			margin-left: 52rpx;
			padding: 6rpx 16rpx;
			border-radius: 24rpx;
			color: $btn-primary-color;
			background-color: $btn-primary-background;
			font-size: 22rpx;
		}

		.detail {
			margin-top: 26rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.divider {
			width: 100%;
			height: 1rpx;
			margin: 30rpx 0 16rpx;
			background-color: $border-color;
		}

		.footer {
			color: $content-color;

			image {
				width: 37rpx;
				height: 37rpx;
				margin-right: 16rpx;
			}
			
			.placeholder {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				border: 2px solid #3A75C0;
			}
		}

		&.active .footer .label-set {
			color: $title-color;
		}
	}
</style>